<template>
	<view class="">
		<view class="page2box hdpagein" :style="'display:'+(showmain ? 'block' : 'none')+';'">
			<view class="clearfloat mb20">
				<view class="page2box-chitem" :class="item.ch ? 'page2box-chact' : ''" v-for="item in tbch"
					@click="chtag(item)">
					{{item.name}}
				</view>
			</view>
			<view class="bj_between mb30">
				<view class="page2box-schitem" :class="item.ch ? 'page2box-schitemon' : ''" v-for="(item,i) in tbsch"
					@click="chtag2(item)">
					<view class="">
						{{item.name}}
					</view>
					<view class="bj_center">
						<image src="/static/page2/i1.png"></image>
						<text v-if="i == 0">{{time1}}</text>
						<text v-if="i == 1">{{time2}}</text>
						<text v-if="i == 2">Detalhes</text>
					</view>
				</view>
			</view>
			<!-- 个人信息 -->
			<view class="page2box-myinfo" v-if="!tbsch[2].ch">
				<view class="bj_between mb20">
					<view class="bj_left">
						<image src="/static/page2/tx.png" class="page2box-myinfo-mypic"></image>
						<view>
							<view class="mb10">
								{{user.userId}}
							</view>
							<view class="">
								<text>{{$t("page2.txt1")}}</text>
								<text class="cff" v-if="dateType == 1">{{ud.bet_today}}</text>
								<text class="cff" v-if="dateType == 2">{{ud.bet_week}}</text>
								<text class="cff" v-if="dateType == 3">{{ud.bet_month}}</text>
							</view>
						</view>
					</view>
					<view class="page2box-myinfo-btn" @click="tonext(3)">
						{{$t("page2.btnt")}}
					</view>
				</view>
				<image src="/static/page2/x.png" class="w100 mb10" mode="widthFix"></image>
				<view class="bj_around f24 tc">
					<view class="w50">
						<view class="">
							{{$t("page2.txt2")}}
						</view>
						<view class="">
							{{$t("page2.txt4")}}
						</view>
					</view>
					<image src="/static/page2/x2.png" style="width: 2rpx;" mode="widthFix"></image>
					<view class="w50">
						<view class="">
							{{$t("page2.txt3")}}
						</view>
						<view class="">
							<text>{{$t("menu.$")}} {{ud.ranking_bonus}} </text>
							<text class="cy">({{ud.ranking_rate}})</text>
						</view>
					</view>
				</view>
			</view>
			<!--奖杯区域-->
			<view class="page2box-jbbox">
				<view class="tc">
					<image src="/static/page2/n1.png" class="page2box-jbbox-jbt" mode="widthFix"></image>
				</view>
				<view class="page2box-jbbox-jbn bj_center">
					{{$t("menu.$")}} {{getNum()}}
				</view>
				<view class="tc f24" v-if="!tbsch[2].ch">
					{{$t("page2.txt5")}}
				</view>
				<view class="tc" v-if="tbsch[2].ch">
					2025-05-11 - 2025-05-12
				</view>
				<view class="bj_between f24" v-if="!tbsch[2].ch">
					<view class="page2box-jbbox-jb2" v-if="top3list[1]">
						<view class="idbox">
							{{top3list[1].username}}
						</view>
						<view class="bj_center mbox">
							<image src="/static/page2/i2.png" class="page2box-ico2"></image>
							<text>{{top3list[1].number}}</text>
						</view>
						<view class="f22 tc">
							<text class="cy">{{$t("menu.$")}}{{top3list[1].bonus}}</text>
							<text>({{top3list[1].rate}}%)</text>
						</view>
					</view>
					<view class="page2box-jbbox-jb1" v-if="top3list[0]">
						<view class="idbox">
							{{top3list[0].username}}
						</view>
						<view class="bj_center mbox">
							<image src="/static/page2/i2.png" class="page2box-ico2"></image>
							<text>{{top3list[0].number}}</text>
						</view>
						<view class="f22 tc">
							<text class="cy">{{$t("menu.$")}}{{top3list[0].bonus}}</text>
							<text>({{top3list[0].rate}}%)</text>
						</view>
					</view>
					<view class="page2box-jbbox-jb3" v-if="top3list[2]">
						<view class="idbox">
							{{top3list[2].username}}
						</view>
						<view class="bj_center mbox">
							<image src="/static/page2/i2.png" class="page2box-ico2"></image>
							<text>{{top3list[2].number}}</text>
						</view>
						<view class="f22 tc">
							<text class="cy">{{$t("menu.$")}}{{top3list[2].bonus}}</text>
							<text>({{top3list[2].rate}}%)</text>
						</view>
					</view>
				</view>
				<view class="f24 tc" v-html="txt6" v-if="!tbsch[2].ch"></view>

			</view>

			<view class="page2box-phbox" v-if="!tbsch[2].ch">
				<view class="bj_between mb30" v-for="item in alllist">
					<view class="page2box-phbox-xh">
						{{item.no}}
					</view>
					<view class="page2box-phbox-zh">
						{{item.username}}
					</view>
					<view class="page2box-phbox-qq bj_left">
						<image src="/static/page2/i2.png" class="page2box-ico2"></image>
						<text>{{item.number}}</text>
					</view>
					<view class="page2box-phbox-qq2">
						<text class="cy">{{$t("menu.$")}}{{item.bonus}}</text>
						<text>({{item.rate}}%)</text>
					</view>
				</view>
			</view>

			<view class="page2box-phbox2" v-if="tbsch[2].ch">
				<view class="bj_between mb30">
					<view class="page2box-phbox2-xh tc">
						{{$t("page2.th1")}}
					</view>
					<view class="page2box-phbox2-zh tc">
						{{$t("page2.th2")}}
					</view>
					<view class="page2box-phbox2-qq tc">
						{{$t("page2.th3")}}
					</view>
					<view class="page2box-phbox2-qq2 tc">
						{{$t("page2.th4")}}
					</view>
				</view>
				<view class="bj_between mb30" v-for="item in alllist">
					<view class="page2box-phbox2-xh tc">
						{{item.no}}
					</view>
					<view class="page2box-phbox2-zh">
						{{item.username}}
					</view>
					<view class="page2box-phbox2-qq bj_left">
						<image src="/static/page2/i2.png" class="page2box-ico2"></image>
						<text>{{item.number}}</text>
					</view>
					<view class="page2box-phbox2-qq2">
						<text class="cy">{{$t("menu.$")}}{{item.bonus}}</text>
						<text>({{item.rate}}%)</text>
					</view>
				</view>
			</view>


			<image src="/static/page2/i3.png" class="page2box-ico3" @click="totop"></image>

			<view class="page2box-rbtn1 bj_center" @click="tonext(1)" v-if="!tbsch[2].ch">
				<image src="/static/page2/i4.png"></image>
			</view>
			<view class="page2box-rbtn2 bj_center" @click="tonext(2)" v-if="!tbsch[2].ch">
				{{$t("page2.btnt2")}}
			</view>


		</view>
		<zero-loading type="surround" v-if="loading"></zero-loading>
		<view style="overflow: hidden;">
			<!--二级内容-->
			<component :is="pageurl" ref="component" style="padding-top: 0;" />
		</view>
	</view>

</template>

<script setup>
	import {
		onShow,
		onLoad,
		onHide
	} from "@dcloudio/uni-app"
	import {
		ref,
		provide
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	import RulesVue from "../common/Rules.vue";
	import liwuVue from "../common/liwu.vue";
	import baoVue from "../hd/bao.vue";
	let showmain = ref(true)
	const {
		t
	} = useI18n()
	let user = ref({})
	import common from '../../js/common';
	onShow(function() {
		if (getApp().globalData.userInfo == null) {
			getApp().globalData.dl = true
			uni.switchTab({
				url: "/pages/index/index"
			})
			return
		}
		updateTabBarTexts()
		// 获取页面栈的实例数组
		const pages = getCurrentPages();
		// 获取当前页面实例
		const currentPage = pages[pages.length - 1];
		// 获取当前页面路径
		const currentRoute = "/" + currentPage.route;
		getApp().globalData.taburl = currentRoute
		user.value = getApp().globalData.userInfo
	})
	onLoad(function() {
		winit();
		getTime();
	})
	// 初始化菜单名称
	const updateTabBarTexts = () => {

		const tabMap = {
			0: 'menu1',
			1: 'menu2',
			2: 'menu3',
			3: 'menu4',
			4: 'menu5'
		}
		Object.entries(tabMap).forEach(([index, key]) => {
			uni.setTabBarItem({
				index: parseInt(index),
				text: t(key)
			})
		})
	}


	function getNum() {
		return Number(getApp().globalData.config2.jackpot_prize).toFixed(2)
	}
	let pageurl = ref(null)
	let txt6 = t("page2.txt6")
	let tbch = ref([{
			name: t("page2.c1"),
			ch: true,
			tag: 1
		},
		{
			name: t("page2.c2"),
			ch: false,
			tag: 2
		}
	])

	let tbsch = ref([{
			name: t("page2.s1"),
			ch: true,
			time: "05:30:06",
			tag: 1
		},
		{
			name: t("page2.s2"),
			ch: false,
			time: "05:30:06",
			tag: 2
		},
		{
			name: t("page2.s3"),
			ch: false,
			time: "Detalhes",
			tag: 3
		}
	])

	let type = ref("1")
	let dateType = ref("1")
	let loading = ref(false)
	let top3list = ref([])
	let alllist = ref([])
	let ud = ref({})

	let time1 = ref("")
	let time2 = ref("")

	function winit() {
		loading.value = true
		top3list.value = []
		alllist.value = []
		common.ranking({
			type: type.value,
			dateType: dateType.value
		}).then(res => {
			alllist.value = res.data.data.ranking_list
			ud.value = res.data.data.user
			let max = alllist.value.length < 3 ? alllist.value.length : 3
			for (var i = 0; i < max; i++) {
				top3list.value.push(alllist.value[i])
			}
			loading.value = false
		})
	}

	function getTime() {
		time1.value = common.getRemainingTimeToday();
		time2.value = common.getRemainingTimeThisWeek();
		setTimeout(function(){
			getTime()
		},1000)
	}

	function chtag(item) {
		if (loading.value) {
			return
		}
		for (var i = 0; i < tbch.value.length; i++) {
			tbch.value[i].ch = false
		}
		item.ch = true
		type.value = item.tag
		winit();
	}

	function chtag2(item) {
		if (loading.value) {
			return
		}
		for (var i = 0; i < tbsch.value.length; i++) {
			tbsch.value[i].ch = false
		}
		item.ch = true
		dateType.value = item.tag
		winit();
	}

	function totop() {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	}

	// 打开二级界面 1是规则2是礼物3是好友奖励
	function tonext(v) {
		if (v == 1) {
			pageurl.value = RulesVue
		} else if (v == 2) {
			pageurl.value = liwuVue
		} else if (v == 3) {
			pageurl.value = baoVue
		}
		setTimeout(function() {
			showmain.value = false
		}, 300)
	}

	provide("clhd", clhd);

	// 返回排行界面
	function clhd() {
		showmain.value = true
		setTimeout(function() {
			pageurl.value = null
		}, 300)
	}
</script>

<style scoped lang="scss">
	.page2box {
		padding: 0 14rpx 140rpx;
		background: #003311;

		&-rbtn1 {
			background: url("/static/page2/b1.png") no-repeat center center;
			background-size: 100% 100%;
			width: 68rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
			top: 550rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		&-rbtn2 {
			background: url("/static/page2/b2.png") no-repeat center center;
			background-size: 100% 100%;
			width: 136rpx;
			height: 68rpx;
			position: absolute;
			right: 0;
			top: 780rpx;
			font-size: 24rpx;
			font-weight: bold;
		}

		&-ico2 {
			width: 28rpx;
			height: 28rpx;
		}

		&-ico3 {
			width: 88rpx;
			height: 88rpx;
			left: 646rpx;
			bottom: 200rpx;
			position: sticky;
		}

		&-chitem {
			float: left;
			width: 50%;
			height: 104rpx;
			line-height: 104rpx;
			font-size: 28rpx;
			color: #A2B5D5;
			text-align: center;
			background: #003311;
		}

		&-chact {
			color: #FFFFFF;
			background: url("/static/page2/c.png") no-repeat center center;
			background-size: 100% 100%;
		}

		&-schitem {
			width: 100%;
			height: 108rpx;
			background: #001F0A;
			border-radius: 20rpx;
			color: #9C9FB2;
			font-size: 24rpx;
			padding-top: 20rpx;
			text-align: center;

			view:nth-child(1) {
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 2rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}

		&-schitemon {
			background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
			color: #fff;
		}

		&-myinfo {
			background: #001F0A;
			border-radius: 20rpx;
			border: 2rpx solid #00561D;
			padding: 20rpx 32rpx;

			&-mypic {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			&-btn {
				width: 184rpx;
				height: 68rpx;
				line-height: 68rpx;
				text-align: center;
				background: #F7C735;
				border-radius: 16rpx;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		&-jbbox {
			background: url("/static/page2/p2b.png") no-repeat center center;
			background-size: 100% 100%;
			padding: 30rpx 28rpx 0;
			margin-bottom: 20rpx;
			position: relative;



			&-jbt {
				width: 524rpx;
			}

			&-jbn {
				width: 664rpx;
				height: 140rpx;
				background: url("/static/page2/n2.png") no-repeat center center;
				background-size: 100% 100%;
				font-size: 60rpx;
				font-weight: bold;
				color: #FFDB65;
				padding-bottom: 10rpx;
			}

			&-jb1 {
				width: 224rpx;
				height: 420rpx;
				background: url("/static/page2/j1.png") no-repeat center center;
				background-size: 100% 100%;
				padding-top: 270rpx;
				text-align: center;

				.idbox {
					margin-bottom: 34rpx;
				}

				.mbox {
					margin-bottom: 20rpx;
				}
			}

			&-jb2 {
				width: 224rpx;
				height: 420rpx;
				background: url("/static/page2/j2.png") no-repeat center center;
				background-size: 100% 100%;
				padding-top: 290rpx;
				text-align: center;

				.idbox {
					margin-bottom: 16rpx;
				}

				.mbox {
					margin-bottom: 18rpx;
				}
			}

			&-jb3 {
				width: 224rpx;
				height: 420rpx;
				background: url("/static/page2/j3.png") no-repeat center center;
				background-size: 100% 100%;
				padding-top: 290rpx;
				text-align: center;

				.idbox {
					margin-bottom: 16rpx;
				}

				.mbox {
					margin-bottom: 18rpx;
				}
			}


		}

		&-phbox {
			background: #00561D;
			border-radius: 20rpx;
			padding: 38rpx 32rpx;

			&-xh {
				width: 10%;
			}

			&-zh {
				width: 30%;
			}

			&-qq {
				width: 30%;
			}

			&-qq2 {
				width: 40%;
			}
		}

		&-phbox2 {
			background: #00561D;
			border-radius: 20rpx;
			padding: 38rpx 18rpx;

			&-xh {
				width: 15%;
			}

			&-zh {
				width: 25%;
			}

			&-qq {
				width: 25%;
			}

			&-qq2 {
				width: 40%;
			}
		}
	}
</style>